<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <title>WEBSOCKET</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .my-top{
      margin:5rem auto 0;
    }
    .show-content{
      list-style: none;
    }
    @media screen and (max-width:1024px){
      .my-show{
        padding-right:0;
        margin-top:2rem;
      }
    }
  </style>
  <!-- <script src="./js/jquery-3.2.1.js"></script> -->
  <!--if IE8 -->
  <script src="./js/jquery-compat-3.0.0-alpha1.js"></script>
  <script>
    var ws = null;
    function WebSocketTest(url) {
      if ("WebSocket" in window) {
        //alert("您的浏览器支持 WebSocket!");
        ws = new WebSocket(url);
        var html = "";
        ws.onopen = function() {
          ws.send("进行连接");
        };
        ws.onmessage = function(evt) {
          var received_msg = evt.data;
          var obj = eval(`(${received_msg})`);
          var time = new Date().toLocaleString()
          html += `
            <li>
              <p>服务器:${time}</p>
              <p>${obj.msg}</p>
            </li>
          `
          $(".show-content").html(html);
          changeScroll();
        };
        ws.onclose = function() {
          alert("连接已关闭...");
        };
      } else {
        alert("您的浏览器不支持 WebSocket!");
      }
    }
  </script>
</head>

<body>
  <div class="container-fiuld">
    <div class="row w-75 my-top">
      <div class="col-lg-5 pr-0">
        <div>
          <div class="input-group mb-3">
            <input type="text" class="form-control my-form-control" id="url" placeholder="请输入测试url">
            <div class="input-group-append">
              <button id="link" class="btn btn-primary" type="button">连接</button>
              <button id="close" class="btn btn-danger" type="button">断开</button>
            </div>
          </div>
          <p class="mt-3">
            1、连接格式为 ws://IP或域名:端口（示例ws://121.40.165.18:8800）<br>
            2、对于内网的测试环境，只需填入服务端的内网IP和端口<br>
            3、可连接我上面提供的服务端ws地址来测试您自己的客户端<br>
          </p>
            <div class="form-group">
              <label for="comment">发送的内容:</label>
              <textarea class="form-control w-100" rows="6" id="comment"></textarea>
            </div>
            <button id="send" class="btn btn-primary btn-block">发送（ctrl+回车）</button>
        </div>
      </div>
      <div class="col-lg-7 my-show">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">消息窗口</h5>
          </div>
          <div class="card-body get-msg" style="height:25rem;overflow-y: scroll">
            <ul class="show-content"></ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $("#link")
      .click(function() {
        var url = $("#url")
          .val();
        if (url) {
          WebSocketTest(url);
        } else {
          alert("请输入路径")
        }
      })
    //ws://192.168.1.106:8181
    $("#send")
      .click(function() {
        var val = $("#comment")
          .val();
        ws.send(val);
      })
    $("#close")
      .click(function() {
        ws.close();
      })
    //监听滚动条的事件
    var c_h = 0;
    function changeScroll(){
      c_h += $(".show-content").children("li").height();
      $(".get-msg").scrollTop(c_h+60);
    }
  </script>
</body>

</html>
